import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Progress, Avatar, List, Tag, Divider, Button } from 'antd';
import { 
  UserOutlined, 
  ShoppingCartOutlined, 
  DollarOutlined, 
  TeamOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  EyeOutlined,
  MessageOutlined,
  LikeOutlined,
  StarOutlined,
  GithubOutlined,
  LinkOutlined,
  BellOutlined
} from '@ant-design/icons';
import * as echarts from 'echarts';

interface ProjectItem {
  name: string;
  description: string;
  icon: React.ReactNode;
  personal: string;
  time: string;
}

interface NoticeItem {
  title: string;
  type: string;
  date: string;
  avatar: string;
}

interface ShortcutItem {
  name: string;
  icon: React.ReactNode;
  url: string;
}

const Dashboard: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [totalData, setTotalData] = useState({
    project: 40,
    access: 2340,
    todo: 10,
    sales: 12580
  });

  // 模拟项目数据
  const projects: ProjectItem[] = [
    {
      name: 'React Admin Pro',
      description: '基于 React + TypeScript + Ant Design 的管理系统',
      icon: <Avatar style={{ backgroundColor: '#1890ff' }}>R</Avatar>,
      personal: 'React + TypeScript',
      time: '2024-01-18'
    },
    {
      name: 'Vue Admin Plus',
      description: '基于 Vue3 + Element Plus 的后台管理系统',
      icon: <Avatar style={{ backgroundColor: '#52c41a' }}>V</Avatar>,
      personal: 'Vue3 + Element Plus',
      time: '2024-01-17'
    },
    {
      name: 'Angular Dashboard',
      description: '基于 Angular + NG-ZORRO 的企业级应用',
      icon: <Avatar style={{ backgroundColor: '#f5222d' }}>A</Avatar>,
      personal: 'Angular + NG-ZORRO',
      time: '2024-01-16'
    },
    {
      name: 'Node.js API',
      description: '基于 Node.js + Express 的后端服务',
      icon: <Avatar style={{ backgroundColor: '#722ed1' }}>N</Avatar>,
      personal: 'Node.js + Express',
      time: '2024-01-15'
    },
    {
      name: 'Flutter Mobile',
      description: '基于 Flutter 的跨平台移动应用',
      icon: <Avatar style={{ backgroundColor: '#13c2c2' }}>F</Avatar>,
      personal: 'Flutter + Dart',
      time: '2024-01-14'
    },
    {
      name: 'Spring Boot',
      description: '基于 Spring Boot 的微服务架构',
      icon: <Avatar style={{ backgroundColor: '#fa8c16' }}>S</Avatar>,
      personal: 'Spring Boot + Cloud',
      time: '2024-01-13'
    }
  ];

  // 模拟通知数据
  const notices: NoticeItem[] = [
    {
      title: '前端提供 React 18 + TypeScript + Vite 架构',
      type: '系统',
      date: '2024-01-18',
      avatar: ''
    },
    {
      title: '后端提供 Spring Boot 3.2 + Cloud 架构',
      type: '公告',
      date: '2024-01-17',
      avatar: ''
    },
    {
      title: '全部开源，个人与企业可 100% 直接使用',
      type: '通知',
      date: '2024-01-16',
      avatar: ''
    },
    {
      title: '国内使用最广泛的快速开发平台',
      type: '公告',
      date: '2024-01-15',
      avatar: ''
    }
  ];

  // 模拟快捷操作数据
  const shortcuts: ShortcutItem[] = [
    { name: 'Github', icon: <GithubOutlined />, url: 'https://github.com' },
    { name: 'React', icon: <LinkOutlined />, url: 'https://reactjs.org' },
    { name: 'Ant Design', icon: <LinkOutlined />, url: 'https://ant.design' },
    { name: 'TypeScript', icon: <LinkOutlined />, url: 'https://typescriptlang.org' },
    { name: 'Vite', icon: <LinkOutlined />, url: 'https://vitejs.dev' },
    { name: 'Node.js', icon: <LinkOutlined />, url: 'https://nodejs.org' }
  ];

  useEffect(() => {
    // 模拟数据加载
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1000);

    // 初始化图表
    initCharts();

    return () => clearTimeout(timer);
  }, []);

  const initCharts = () => {
    // 饼图
    setTimeout(() => {
      const pieElement = document.getElementById('pieChart');
      if (!pieElement) return;
      
      try {
        const pieChart = echarts.init(pieElement);
        const pieOption = {
        title: {
          text: '用户来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(pieOption);
      } catch (error) {
        console.error('饼图初始化失败:', error);
      }
    }, 100);

    // 柱状图
    setTimeout(() => {
      const barElement = document.getElementById('barChart');
      if (!barElement) return;
      
      try {
        const barChart = echarts.init(barElement);
      const barOption = {
        title: {
          text: '周活跃量'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '活跃量',
            data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
            type: 'bar',
            itemStyle: {
              color: '#1890ff'
            }
          }
        ]
      };
      barChart.setOption(barOption);
      } catch (error) {
        console.error('柱状图初始化失败:', error);
      }
    }, 100);
  };

  return (
    <div style={{ padding: '24px', background: '#f0f2f5', minHeight: '100vh' }}>
      {/* 欢迎卡片 */}
      <Card style={{ marginBottom: 24 }} loading={loading}>
        <Row gutter={16} justify="space-between">
          <Col xl={12} lg={12} md={12} sm={24} xs={24}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Avatar 
                size={70} 
                icon={<UserOutlined />}
                style={{ marginRight: 16, backgroundColor: '#1890ff' }}
              />
              <div>
                <div style={{ fontSize: '20px', marginBottom: '8px' }}>
                  欢迎回来，管理员！今天也要加油哦 ✨
                </div>
                <div style={{ fontSize: '14px', color: '#666' }}>
                  今日，20℃ - 32℃！
                </div>
              </div>
            </div>
          </Col>
          <Col xl={12} lg={12} md={12} sm={24} xs={24}>
            <div style={{ height: '70px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
              <div style={{ padding: '0 8px', textAlign: 'right' }}>
                <div style={{ marginBottom: '16px', fontSize: '14px', color: '#999' }}>项目</div>
                <div style={{ fontSize: '20px', fontWeight: 'bold' }}>{totalData.project}</div>
              </div>
              <Divider type="vertical" style={{ height: '40px' }} />
              <div style={{ padding: '0 8px', textAlign: 'right' }}>
                <div style={{ marginBottom: '16px', fontSize: '14px', color: '#999' }}>待办</div>
                <div style={{ fontSize: '20px', fontWeight: 'bold' }}>{totalData.todo}</div>
              </div>
              <Divider type="vertical" style={{ height: '40px' }} />
              <div style={{ padding: '0 8px', textAlign: 'right' }}>
                <div style={{ marginBottom: '16px', fontSize: '14px', color: '#999' }}>访问</div>
                <div style={{ fontSize: '20px', fontWeight: 'bold' }}>{totalData.access}</div>
              </div>
            </div>
          </Col>
        </Row>
      </Card>

      {/* 统计卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
          <Card>
            <Statistic
              title="总销售额"
              value={112893}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="元"
            />
            <div style={{ marginTop: 8, fontSize: '12px', color: '#999' }}>
              周同比 12% <ArrowUpOutlined style={{ color: '#3f8600' }} />
            </div>
          </Card>
        </Col>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
          <Card>
            <Statistic
              title="访问量"
              value={8846}
              valueStyle={{ color: '#1890ff' }}
              prefix={<EyeOutlined />}
            />
            <div style={{ marginTop: 8, fontSize: '12px', color: '#999' }}>
              日同比 8% <ArrowUpOutlined style={{ color: '#3f8600' }} />
            </div>
          </Card>
        </Col>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
          <Card>
            <Statistic
              title="支付笔数"
              value={6560}
              valueStyle={{ color: '#722ed1' }}
              prefix={<ShoppingCartOutlined />}
            />
            <div style={{ marginTop: 8, fontSize: '12px', color: '#999' }}>
              转化率 60% <ArrowDownOutlined style={{ color: '#cf1322' }} />
            </div>
          </Card>
        </Col>
        <Col xl={6} lg={12} md={12} sm={24} xs={24}>
          <Card>
            <Statistic
              title="运营活动效果"
              value={78}
              valueStyle={{ color: '#fa8c16' }}
              prefix={<TeamOutlined />}
              suffix="%"
            />
            <div style={{ marginTop: 8, fontSize: '12px', color: '#999' }}>
              周同比 5% <ArrowUpOutlined style={{ color: '#3f8600' }} />
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        {/* 左侧内容 */}
        <Col xl={16} lg={16} md={24} sm={24} xs={24} style={{ marginBottom: 16 }}>
          {/* 项目列表 */}
          <Card 
            title="项目" 
            extra={<Button type="link">更多</Button>}
            style={{ marginBottom: 16 }}
            loading={loading}
          >
            <Row gutter={[16, 16]}>
              {projects.map((project, index) => (
                <Col xl={8} lg={8} md={8} sm={24} xs={24} key={index}>
                  <Card size="small" hoverable>
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
                      {project.icon}
                      <span style={{ marginLeft: 8, fontSize: '16px', fontWeight: 'bold' }}>
                        {project.name}
                      </span>
                    </div>
                    <div style={{ fontSize: '12px', color: '#999', marginBottom: 12 }}>
                      {project.description}
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', color: '#999' }}>
                      <span>{project.personal}</span>
                      <span>{project.time}</span>
                    </div>
                  </Card>
                </Col>
              ))}
            </Row>
          </Card>

          {/* 图表区域 */}
          <Card loading={loading}>
            <Row gutter={20}>
              <Col xl={10} lg={10} md={24} sm={24} xs={24}>
                <Card size="small" style={{ marginBottom: 8 }}>
                  <div id="pieChart" style={{ height: '280px' }}></div>
                </Card>
              </Col>
              <Col xl={14} lg={14} md={24} sm={24} xs={24}>
                <Card size="small" style={{ marginBottom: 8 }}>
                  <div id="barChart" style={{ height: '280px' }}></div>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>

        {/* 右侧内容 */}
        <Col xl={8} lg={8} md={24} sm={24} xs={24} style={{ marginBottom: 16 }}>
          {/* 快捷操作 */}
          <Card 
            title="快捷操作" 
            style={{ marginBottom: 16 }}
            loading={loading}
          >
            <Row gutter={[8, 8]}>
              {shortcuts.map((item, index) => (
                <Col span={8} key={index}>
                  <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                    {item.icon}
                    <Button type="link" style={{ marginLeft: 8, padding: 0 }}>
                      {item.name}
                    </Button>
                  </div>
                </Col>
              ))}
            </Row>
          </Card>

          {/* 通知公告 */}
          <Card 
            title="通知公告" 
            extra={<Button type="link">更多</Button>}
            loading={loading}
          >
            <List
              itemLayout="horizontal"
              dataSource={notices}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<Avatar icon={<BellOutlined />} style={{ backgroundColor: '#1890ff' }} />}
                    title={
                      <div>
                        <Tag color={item.type === '通知' ? 'blue' : 'green'}>
                          {item.type}
                        </Tag>
                        <span style={{ fontSize: '14px' }}>{item.title}</span>
                      </div>
                    }
                    description={
                      <div style={{ fontSize: '12px', color: '#999' }}>
                        {item.date}
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;